<!DOCTYPE html>
<!--
 *  Copyright (c) 2014 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<html>
<head>

  <meta charset="utf-8">
  <meta name="description" content="WebRTC code samples">
  <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
  <meta itemprop="description" content="Client-side WebRTC code samples">
  <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
  <meta itemprop="name" content="WebRTC code samples">
  <meta name="mobile-web-app-capable" content="yes">
  <meta id="theme-color" name="theme-color" content="#ffffff">

  <base target="_blank">

  <title>Peer connection</title>

  <link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
  <!-- <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css"> -->
  <!--   <link rel="stylesheet" href="../../../css/main.css" /> -->
  <link rel="stylesheet" href="css/main_root.css" />
  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <div id="container">

    <h1><a >WebRTC samples</a> <span>Caller</span></h1>

    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>

    <div id="buttons">
      <button id="switchCapture">Open Capture</button>
      <button id="offerButton">Create Offer</button>
      <button id="setLocalSdpButton">Set Local SDP</button>
      <button id="setRemoteSdpButton">Set Remote SDP</button>
      <button id="setRemoteCandButton">Set Remote Candidates</button>
      <button id="hangupButton">Hang Up</button>
    </div>

    <div id="states">
      
      <div>
        <div class="label">process flow:</div><div id="prflow" class="value">Open Capture => Create Offer => Set Local SDP => Set Remote Pranswer => Set Remote Candidates => Set Remote Answer</div>
      </div>
      
      <div>
        <div class="label">PC state:</div><div id="pcState" class="value"></div>
      </div>
      
      <div>
        <div class="label">PC ICE state:</div><div id="pcIceState" class="value"></div>
      </div>

      <div>
        <div class="label">sentInfo:</div>  <div id="sentInfo" class="statistics" > </div>
      </div>

      <div>
        <div class="label">recvInfo:</div>  <div id="recvInfo" class="statistics" > </div>
      </div>

    </div>


    <p>Local SDP</p>
    <textarea id="localSDP"></textarea>
    <p>Local Candidates</p>
    <textarea id="localCandidates"></textarea>

    <p>Remote SDP</p>
    <textarea id="answerSDP"></textarea>
    <p>Remote Candidates</p>
    <textarea id="answerCandidates"></textarea>


    <p>View the console to see logging. The <code>MediaStream</code> object <code>localStream</code>, and the <code>RTCPeerConnection</code> objects <code>localPeerConnection</code> and <code>remotePeerConnection</code> are in global scope, so you can inspect them in the console as well.</p>


  </div>

  <!-- <script src="../../../js/adapter.js"></script> -->
  <script src="js/adapter_root.js"></script>
  <script src="js/main.js"></script>

  <!-- <script src="../../../js/lib/ga.js"></script> -->
</body>
</html>
